<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【题型】：
          <template>
            {{ format(questionType,detailsList.questionType) }}
          </template>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【编号】：<span>{{ topicId }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【难度】：
          <template>
            {{ format(difficulty,detailsList.difficulty) }}
          </template>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【标签】：<span> {{ detailsList.tags }}</span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【学科】：<span> {{ detailsList.subjectName }}</span>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="grid-content bg-purple">
          【目录】：<span> {{ detailsList.directoryName }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          【方向】：<span> {{ detailsList.direction }}</span>
        </div>
      </el-col>
    </el-row>
    <hr>

    <!-- 单选 -->
    <div v-if="detailsList.questionType==='1'" class="grid-content bg-purple box">
      【题干】：<span style="color: blue;" v-html="detailsList.question" />
      <div style="padding-bottom: 10px;">单选题 选项：（以下选中的选项为正确答案）</div>
      <div v-for="item in detailsList.options" :key="item.id" class="box1">
        <el-radio v-model="isRight" :label="item.isRight" @change="isRight=1">{{ item.title }}</el-radio>
      </div>
    </div>

    <!-- 多选 -->
    <div v-if="detailsList.questionType==='2'" class="grid-content bg-purple box">
      【题干】：<span style="color: blue;" v-html="detailsList.question" />
      <div style="padding-bottom: 10px;">多选题 选项：（以下选中的选项为正确答案）</div>
      <div v-for="item in detailsList.options" :key="item.id" class="box1">
        <el-checkbox v-model="isRights" :label="item.isRight" @change="isRights=[1]">{{ item.title }}</el-checkbox>
      </div>
    </div>

    <!-- 简答 -->
    <div v-if="detailsList.questionType==='3'" class="grid-content bg-purple box">
      【题干】：<span style="color: blue;" v-html="detailsList.question" />

    </div>
    <hr>
    <div class="box">
      【参考答案】：<el-button type="danger" size="small" @click="show=true">视频答案预览</el-button>
      <div v-if="show&&detailsList.videoURL">
        <video width="320" height="240" controls="controls">
          <source :src="detailsList.videoURL" type="video/mp4">
        </video>
      </div>
    </div>
    <hr>

    <div class="box">
      【答案解析】：<div style="display: inline-block;" v-html="detailsList.answer" />
    </div>
    <hr>

    <div class="box">
      【题目备注】：<span v-html="detailsList.remarks" />
    </div>
    <el-row type="flex" class="row-bg" justify="end">
      <el-col :span="3"><el-button type="primary" style="margin-top: 15px;" @click="closure">关闭</el-button></el-col>
    </el-row>

  </div>
</template>

<script>
import { detail } from '../../api/hmmm/questions'
import { questionType, difficulty, chkType, publishType } from '../../api/hmmm/constants'
export default {
  name: 'Questionspreview',
  props: {
    topicId: {
      type: Number
    }
  },
  data() {
    return {
      show: false,
      // 单选
      isRight: 1,
      // 多选
      isRights: [1],
      detailsList: {},
      option: false,
      // 审核状态枚举
      publishType,
      // 审核状态枚举
      chkType,
      // 题型枚举
      questionType,
      // 难度枚举
      difficulty
    }
  },
  watch: {
    topicId: async function(newVal, oldVal) {
      console.log(newVal)
      console.log(oldVal)
      const res = await detail({ id: newVal })
      this.detailsList = res.data
    }
  },
  created() {
    this.detail()
  },
  methods: {
    // 关闭弹窗
    closure() {
      this.show = false
      this.$emit('closures')
    },
    // 根据ID获取详情
    async detail() {
      const res = await detail({ id: this.topicId })
      this.detailsList = res.data
    },

    // 难度枚举
    // 审核状态枚举
    // 题型枚举
    // 格式化题型
    format(val, i) {
      const res = val.filter(item => item.value === Number(i))
      return Object.assign({}, res[0]).label
    }

  }
}
</script>

<style scoped>
.el-col.el-col-6 {
    height: 30px;
}
.box {
    padding: 5px 0;
}
.box1{
  padding: 7px 0;
}
.el-dialog__body {
    padding: 30px 20px 10px 20px;
}
</style>
